<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景</title>
    <style>
        header{
            height: 70px;
            outline: 1px solid red;
            background-image: url(./img/head.png);
        }
        .box{
            outline: 1px solid red;
            width: 1920px;
            height: 1080px;
            margin: 0 auto;
        }
        .c1{
            
            background-color: rgb(212, 133, 133);
            background-image: url(./img/timg.jpg);
            /* background-size: 600px auto; */
            /*background-size: auto 50% ;*/ /*百分百是相对于元素而不是相对应图片本身*/
            /* cover 背景图片覆盖容器，在图片能够全部覆盖容器的情况下，保持图片的比例让图片最小 */
            /* background-size: cover;  */
            /* contain 容器包裹图片，在容器能偶全部包裹图片的情况下，保持图片的比例让图片最大 */
            /* background-size: contain; */
            background-repeat: no-repeat;
            /* background-position: 10px 20px; */
            /* background-position: -10% -20%; */
            /* background-position: center  ; */
            background-attachment: fixed;
        }

        .c2{
            background-image: url('./img/gitee.ico');
            background-repeat: no-repeat;
            background-position:0 0 ;
        }
        .c3 img{
            width: 100%; /*比例也是更具父元素的大小来的*/
        }
        
        body{
            height: 2500px;
        }
        a{
            display: inline-block;
            width: 24px;
            height: 24px;
            /* background-color: rgb(243, 190, 190); */
            outline: 1px solid red;
            background-image: url(./img/tb.png);

        }
        .a1{
            
        }
        .a2{
            background-position: 0 -44px;
        }
        .a3{
            background-position: 0 -88px;
        }
        .b4{
            /* background-color: rgb(247, 208, 208);
            background-image: url(./img/timg.jpg);
            background-size: 600px auto;
            background-repeat: no-repeat;
            background-position:50px 100px;
            background-attachment: fixed; */

            background: no-repeat 50px 100px fixed rgb(247, 208, 208) url(./img/timg.jpg) ;
            /* 简写的属性，可以把position/size（顺序不能乱） 当成一组属性，不需要考虑其他属性的顺序。 */
            }
    </style>

</head>
<body>
    <header>

    </header>
    <div class="box c1"></div>
    <div class="box c2"></div>
    <div class="box c3">
        <img src="./img/timg.jpg" alt="">
    </div>
    <h2>雪碧图</h2>
    <a class="a1" href=""></a>
    <a class="a2"  href=""></a>
    <a class="a3"  href=""></a>
    <h2>背景简写</h2>
    <div class="box b4">

    </div>
</body>
</html>